<template>
    <view>
        <view class="donutLogin__app-info">
            <image class="donutLogin__app-icon" :src="appIcon"></image>
            <view class="donutLogin__app-name">{{ appName }}</view>
        </view>

        <view class="donutLogin__login-action">
            <button class="donutLogin__login-button" type="primary" @tap="onTapWeixinMiniProgramLogin" :disabled="!checkedAgree">微信小程序登录</button>
            <checkbox-group @change="onCheckboxChange">
                <label class="donutLogin__checkbox-container">
                    <checkbox class="donutLogin__checkbox" :checked="checkedAgree" />
                    <span class="donutLogin__checkbox-label"></span>
                    <span class="donutLogin__checkbox-text">
                        阅读并同意
                        <span @tap.native.stop.prevent="onShowAgreement($event, { idx: '0' })" data-idx="0" style="color: #576b95">《用户协议》</span>
                        <span @tap.native.stop.prevent="onShowAgreement($event, { idx: '1' })" data-idx="1" style="color: #576b95">《隐私政策》</span>
                    </span>
                </label>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            appIcon: 'https://testchu-7gy8occc8dcc14c3-1304825656.tcloudbaseapp.com/platform-console/assets/favicon.svg',
            appName: 'Donut 多端应用',
            checkedAgree: false,
            loginSuccess: false // 标记是否登录成功
        };
    }
    /**
     * 退出页面时触发基础库回调，由基础库内部处理系统登录态。
     */,
    onUnload() {
        const eventChannel = this.getOpenerEventChannel();
        if (eventChannel) {
            eventChannel.emit('__donutLogin__', {
                success: this.loginSuccess
            });
        }
    },
    methods: {
        /**
         * 触发小程序登录，登录成功后自动退出页面
         */
        onTapWeixinMiniProgramLogin() {
            uni.weixinMiniProgramLogin({
                success: () => {
                    this.setData({
                        loginSuccess: true
                    });
                    uni.navigateBack();
                },
                fail: (e) => {
                    console.error(e);
                    uni.showToast({
                        title: '小程序登录失败',
                        icon: 'none'
                    });
                }
            });
        },

        onCheckboxChange() {
            this.setData({
                checkedAgree: !this.checkedAgree
            });
        },

        /**
         *
         * 使用单独的 webview 页面展示用户协议
         */
        onShowAgreement(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            const urls = ['link1', 'link2'];
            const url = urls[e.target.dataset.idx];
            // wx.navigateTo({
            //   url: `/pages/webview/index?url=${url}`,
            // });
        }
    }
};
</script>
<style>
.donutLogin__app-info {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbac59;
    margin-top: 120px;
}

.donutLogin__app-icon {
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: contain;
}

.donutLogin__app-name {
    font-weight: 600;
    font-size: 20px;
    margin-left: 12px;
}

.donutLogin__login-action {
    bottom: calc(env(safe-area-inset-bottom) + 120px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.donutLogin__checkbox-container {
    color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    font-size: 12px;
    margin-top: 12px;
}

.donutLogin__checkbox {
    display: none;
}

.donutLogin__checkbox-label {
    appearance: none;
    display: inline-block;
    border: 0;
    outline: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
    mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
    color: rgba(0, 0, 0, 0.3);
    width: 1em;
    height: 1em;
    font-size: 17px;
}

.donutLogin__checkbox[aria-checked='true'] + .donutLogin__checkbox-label,
.donutLogin__checkbox-label:checked {
    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
    mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
    color: #07c160;
}

.donutLogin__checkbox-text {
    margin-left: 2px;
}
</style>
